<template>
  <div class="activity-href">
    <div class="content">
      <search-bar>
        <template #normal>
          <el-form-item label="页面名称">
            <el-input
                v-model="form.name"
                clearable
                placeholder="请输入页面名称"
            ></el-input>
          </el-form-item>
        </template>
      </search-bar>

      <div class="list">
        <div class="card" :class="{
          'card-active': checkActive(item),
          'card-selected': item.id === selectedCard?.id
        }" v-for="item in list" @click="clickCard(item)">
          <div class="img-wrapper">
            <img class="img" :src="item.img?item.img:PageHolder"/>
          </div>
          <div class="text">
            <div class="line name">{{ item.name }}</div>
            <el-popover
                placement="top"
                :width="200"
                trigger="hover"
                :content="item.pageLink"
            >
              <template #reference>
                <div class="line link">{{ item.pageLink }}</div>
              </template>
            </el-popover>
          </div>
        </div>
      </div>

      <div class="pager">
        <el-pagination
            v-model:current-page="page.currentPage"
            layout="total, prev, pager, next"
            :total="total"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import moment from "moment";
import {debounce} from "@/utils";
import {pageList} from "@/api/actapp";
import PageHolder from "@/assets/activity/pageholder.png";
import {ILink} from "@/components/hrefSelector/types";
import {IMallPageListRow} from "@/api/modules/pointsMall";
import {Ref} from "vue";
import {useMallConfig} from "@/views/pointsMall/compositions/useMallConfig";

const { mallConfig } = useMallConfig()
const props = defineProps<{
  modelValue: ILink;
}>()

const emits = defineEmits<{
  (e: "click", value: any): void
}>()

const page = reactive({
  currentPage: 1,
  showCount: 20,
})
const total:Ref<number> = ref(0);

const form = reactive({
  name: "",
  relationId: mallConfig.value.id,
})
const list = ref([])
const getList = async () => {
  const rs = await pageList({...form, ...page})

  if (rs.code === 200) {
    list.value = rs.payload ?? []
    total.value = rs.page?.totalResult ?? 0;
  }
}

const debouncedSearch = debounce(() => {
  page.currentPage = 1;
  getList()
}, 700, false)

watch(() => form, debouncedSearch, {
  deep: true
})

watch(() => page, getList, {
  deep: true
})

const selectedCard = ref();
const clickCard = (item: IMallPageListRow) => {
  selectedCard.value = item
  emits("click", item);
}

const checkActive = (item: IMallPageListRow) => {
  return item.name === props.modelValue.urlName && (item.pageLink === props.modelValue.url || item.canonicalPageLink === props.modelValue.url)
}

const formatTime = (value: number) => {
  return value ? moment(value).format("YYYY.MM.DD") : ""
}

onMounted(() => {
  getList();
})

</script>

<style scoped lang="scss">
@use "../styles/index.scss";

.card {
  display: flex;
  width: 200px;
  height: 100px;
  margin-right: 10px;
  font-size: 12px;
  padding: 10px;

  .img-wrapper {
    .img {
      max-width: 50px;
      max-height: 100px;
    }
  }

  .text {
    flex: 1;
    margin-left: 10px;

    .line {
    }

    .name {
      width: 140px;
      word-break: keep-all;
      white-space: nowrap;
      font-size: 14px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 5px;
    }
  }
}

.card:hover {
  background: #EEE;
}
</style>
